<template>
  <div class="dashboard">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
      <div class="banner-content">
        <div class="banner-left">
          <div class="greeting">
            <div class="greeting-animation">
              <h1 class="main-title">早上好，管理员！ 👋</h1>
              <div class="title-underline"></div>
            </div>
            <p class="date-info">
              <el-icon class="weather-icon"><Sunny /></el-icon>
              {{ currentDate }} | 晴朗 22°C
            </p>
            <p class="subtitle">今天也要努力工作，查看您的数据概览</p>
            <div class="quick-stats">
              <div class="quick-stat-item">
                <span class="quick-stat-number">{{ stats.onlineUsers }}</span>
                <span class="quick-stat-label">在线用户</span>
              </div>
              <div class="quick-stat-item">
                <span class="quick-stat-number">{{ formatNumber(stats.todayVisits) }}</span>
                <span class="quick-stat-label">今日访问</span>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-right">
          <div class="action-buttons">
            <el-button type="primary" class="action-btn gradient-blue">
              <el-icon><Plus /></el-icon>
              新增用户
            </el-button>
            <el-button type="success" class="action-btn gradient-green">
              <el-icon><Document /></el-icon>
              生成报表
            </el-button>
            <el-button type="warning" class="action-btn gradient-orange">
              <el-icon><Setting /></el-icon>
              系统设置
            </el-button>
          </div>
          <div class="banner-decoration">
            <div class="floating-card card-1">
              <div class="card-icon">📊</div>
              <div class="card-text">数据分析</div>
            </div>
            <div class="floating-card card-2">
              <div class="card-icon">🚀</div>
              <div class="card-text">性能优秀</div>
            </div>
            <div class="floating-card card-3">
              <div class="card-icon">⚡</div>
              <div class="card-text">运行稳定</div>
            </div>
          </div>
        </div>
      </div>
      <div class="banner-bg-elements">
        <div class="bg-circle circle-1"></div>
        <div class="bg-circle circle-2"></div>
        <div class="bg-circle circle-3"></div>
      </div>
    </div>
    
    <!-- 新增的工作台面板 -->
    <div class="workspace-section">
      <!-- 现在可以使用 WorkspacePanel 了，因为 echarts 已安装 -->
      <WorkspacePanel />
    </div>
    
    <!-- 原有的统计卡片保持不变作为对比展示 -->
    <div class="legacy-section">
      <div class="section-title">
        <h3>传统视图</h3>
        <p>对比展示传统的数据展现方式</p>
      </div>
      
      <div class="stats-container">
      <div class="stat-card users-card">
        <div class="stat-icon">
          <el-icon class="stat-icon-svg"><User /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ formatNumber(stats.totalUsers) }}</div>
          <div class="stat-label">总用户数</div>
          <div class="stat-change positive">
            <el-icon class="change-icon"><TrendCharts /></el-icon>
            +12.5%
          </div>
        </div>
        <div class="stat-chart">
          <div class="mini-chart blue">
            <div class="chart-wave wave-1"></div>
            <div class="chart-wave wave-2"></div>
          </div>
        </div>
      </div>
      
      <div class="stat-card visits-card">
        <div class="stat-icon">
          <el-icon class="stat-icon-svg"><View /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ formatNumber(stats.todayVisits) }}</div>
          <div class="stat-label">今日访问</div>
          <div class="stat-change positive">
            <el-icon class="change-icon"><TrendCharts /></el-icon>
            +8.2%
          </div>
        </div>
        <div class="stat-chart">
          <div class="mini-chart green">
            <div class="chart-wave wave-1"></div>
            <div class="chart-wave wave-2"></div>
          </div>
        </div>
      </div>
      
      <div class="stat-card pageviews-card">
        <div class="stat-icon">
          <el-icon class="stat-icon-svg"><DataAnalysis /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ formatNumber(stats.pageViews) }}</div>
          <div class="stat-label">页面浏览</div>
          <div class="stat-change positive">
            <el-icon class="change-icon"><TrendCharts /></el-icon>
            +15.3%
          </div>
        </div>
        <div class="stat-chart">
          <div class="mini-chart orange">
            <div class="chart-wave wave-1"></div>
            <div class="chart-wave wave-2"></div>
          </div>
        </div>
      </div>
      
      <div class="stat-card time-card">
        <div class="stat-icon">
          <el-icon class="stat-icon-svg"><Timer /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.avgTime }}s</div>
          <div class="stat-label">平均时长</div>
          <div class="stat-change negative">
            <el-icon class="change-icon"><Bottom /></el-icon>
            -3.1%
          </div>
        </div>
        <div class="stat-chart">
          <div class="mini-chart red">
            <div class="chart-wave wave-1"></div>
            <div class="chart-wave wave-2"></div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-container">
      <div class="chart-card main-chart">
        <div class="chart-header">
          <div class="chart-title-section">
            <h3>📈 访问趋势分析</h3>
            <p class="chart-subtitle">多维度数据展示与对比分析</p>
          </div>
          <div class="chart-controls">
            <div class="chart-legend">
              <div class="legend-item">
                <span class="legend-color blue pulse"></span>
                <span>访问量</span>
              </div>
              <div class="legend-item">
                <span class="legend-color orange pulse"></span>
                <span>独立访客</span>
              </div>
              <div class="legend-item">
                <span class="legend-color green pulse"></span>
                <span>页面浏览</span>
              </div>
            </div>
            <div class="chart-actions">
              <el-button size="small" type="primary" plain>7天</el-button>
              <el-button size="small" plain>30天</el-button>
              <el-button size="small" plain>90天</el-button>
              <el-button size="small" circle>
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
        <div class="chart-content">
          <div class="chart-placeholder">
            <!-- 改进的模拟图表 -->
            <div class="enhanced-chart">
              <div class="chart-grid">
                <div class="grid-line" v-for="i in 5" :key="i"></div>
              </div>
              <div class="chart-data-lines">
                <div class="data-line blue-line animated-line">
                  <div class="line-points">
                    <div class="data-point" v-for="i in 7" :key="i" :style="`left: ${(i-1) * 16}%; animation-delay: ${(i-1) * 0.1}s`"></div>
                  </div>
                </div>
                <div class="data-line orange-line animated-line">
                  <div class="line-points">
                    <div class="data-point" v-for="i in 7" :key="i" :style="`left: ${(i-1) * 16}%; animation-delay: ${(i-1) * 0.15}s`"></div>
                  </div>
                </div>
                <div class="data-line green-line animated-line">
                  <div class="line-points">
                    <div class="data-point" v-for="i in 7" :key="i" :style="`left: ${(i-1) * 16}%; animation-delay: ${(i-1) * 0.2}s`"></div>
                  </div>
                </div>
              </div>
              <div class="chart-x-axis">
                <span>周一</span>
                <span>周二</span>
                <span>周三</span>
                <span>周四</span>
                <span>周五</span>
                <span>周六</span>
                <span>周日</span>
              </div>
              <div class="chart-y-axis">
                <span>10k</span>
                <span>8k</span>
                <span>6k</span>
                <span>4k</span>
                <span>2k</span>
                <span>0</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="chart-card side-chart enhanced-side-chart">
        <div class="chart-header">
          <h3>🔴 实时监控</h3>
          <div class="status-indicators">
            <span class="status-indicator online">在线</span>
            <span class="status-dot pulsing"></span>
          </div>
        </div>
        
        <div class="realtime-stats">
          <div class="realtime-circle">
            <div class="circle-progress" :style="`--progress: ${Math.min(stats.onlineUsers / 200 * 100, 100)}%`">
              <div class="realtime-number">{{ stats.onlineUsers }}</div>
              <div class="realtime-label">当前在线</div>
            </div>
          </div>
          
          <div class="performance-metrics">
            <div class="metric-item">
              <div class="metric-icon">⚡</div>
              <div class="metric-info">
                <div class="metric-value">98.5%</div>
                <div class="metric-name">系统性能</div>
              </div>
            </div>
            <div class="metric-item">
              <div class="metric-icon">🛡️</div>
              <div class="metric-info">
                <div class="metric-value">安全</div>
                <div class="metric-name">系统状态</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="ranking-section">
          <h4>🏆 页面热度排行</h4>
          <div class="ranking-list">
            <div class="ranking-item enhanced-ranking" v-for="item in pageRanking" :key="item.id">
              <div class="ranking-badge" :class="getRankingClass(item.id)">
                <span v-if="item.id <= 3">🏆</span>
                <span v-else>{{ item.id }}</span>
              </div>
              <div class="ranking-info">
                <div class="page-name">{{ item.page }}</div>
                <div class="page-stats">
                  <span class="page-count">{{ item.count }}</span>
                  <div class="progress-bar">
                    <div class="progress-fill" :style="`width: ${item.id <= 3 ? (4 - item.id) * 30 + 40 : 20}%`"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增内容区域 -->
    <div class="additional-content">
      <!-- 快捷操作面板 -->
      <div class="quick-actions-panel">
        <div class="panel-header">
          <h3>⚡ 快捷操作</h3>
          <p>常用功能快速入口</p>
        </div>
        <div class="quick-actions-grid">
          <div class="action-item" v-for="action in quickActions" :key="action.id" @click="handleQuickAction(action)">
            <div class="action-icon" :style="{background: action.color}">
              <el-icon :size="24"><component :is="action.icon"/></el-icon>
            </div>
            <div class="action-info">
              <div class="action-name">{{ action.name }}</div>
              <div class="action-desc">{{ action.description }}</div>
            </div>
            <div class="action-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>

      <!-- 系统状态监控 -->
      <div class="system-status-panel">
        <div class="panel-header">
          <h3>🖥️ 系统状态</h3>
          <p>实时系统运行状况</p>
        </div>
        <div class="status-grid">
          <div class="status-item">
            <div class="status-indicator healthy">
              <div class="pulse-dot"></div>
            </div>
            <div class="status-info">
              <div class="status-title">服务器状态</div>
              <div class="status-value">运行正常</div>
            </div>
            <div class="status-chart">
              <div class="mini-progress" :style="`--progress: 95%`">95%</div>
            </div>
          </div>
          
          <div class="status-item">
            <div class="status-indicator warning">
              <div class="pulse-dot"></div>
            </div>
            <div class="status-info">
              <div class="status-title">内存使用</div>
              <div class="status-value">{{ systemStats.memoryUsage }}%</div>
            </div>
            <div class="status-chart">
              <div class="mini-progress warning" :style="`--progress: ${systemStats.memoryUsage}%`">{{ systemStats.memoryUsage }}%</div>
            </div>
          </div>
          
          <div class="status-item">
            <div class="status-indicator healthy">
              <div class="pulse-dot"></div>
            </div>
            <div class="status-info">
              <div class="status-title">CPU 使用率</div>
              <div class="status-value">{{ systemStats.cpuUsage }}%</div>
            </div>
            <div class="status-chart">
              <div class="mini-progress" :style="`--progress: ${systemStats.cpuUsage}%`">{{ systemStats.cpuUsage }}%</div>
            </div>
          </div>
          
          <div class="status-item">
            <div class="status-indicator healthy">
              <div class="pulse-dot"></div>
            </div>
            <div class="status-info">
              <div class="status-title">磁盘空间</div>
              <div class="status-value">{{ systemStats.diskUsage }}%</div>
            </div>
            <div class="status-chart">
              <div class="mini-progress" :style="`--progress: ${systemStats.diskUsage}%`">{{ systemStats.diskUsage }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部内容区域 -->
    <div class="bottom-content">
      <!-- 最近活动 -->
      <div class="recent-activities">
        <div class="panel-header">
          <h3>🕒 最近活动</h3>
          <p>系统操作日志</p>
        </div>
        <div class="activities-list">
          <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
            <div class="activity-avatar" :style="{background: activity.avatarColor}">
              {{ activity.user.charAt(0) }}
            </div>
            <div class="activity-content">
              <div class="activity-text">
                <span class="user-name">{{ activity.user }}</span>
                <span class="activity-action">{{ activity.action }}</span>
                <span class="activity-target">{{ activity.target }}</span>
              </div>
              <div class="activity-time">{{ activity.time }}</div>
            </div>
            <div class="activity-type" :class="activity.type">
              <el-icon><component :is="activity.typeIcon"/></el-icon>
            </div>
          </div>
        </div>
        <div class="activities-footer">
          <el-button text type="primary">查看全部活动</el-button>
        </div>
      </div>

      <!-- 通知公告 -->
      <div class="announcements">
        <div class="panel-header">
          <h3>📢 通知公告</h3>
          <p>重要消息提醒</p>
        </div>
        <div class="announcement-list">
          <div class="announcement-item" v-for="announcement in announcements" :key="announcement.id">
            <div class="announcement-indicator" :class="announcement.priority">
              <div class="indicator-dot"></div>
            </div>
            <div class="announcement-content">
              <div class="announcement-title">{{ announcement.title }}</div>
              <div class="announcement-preview">{{ announcement.preview }}</div>
              <div class="announcement-meta">
                <span class="announcement-date">{{ announcement.date }}</span>
                <span class="announcement-category">{{ announcement.category }}</span>
              </div>
            </div>
            <div class="announcement-actions">
              <el-button size="small" text>查看</el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据概览小组件 -->
      <div class="data-widgets">
        <div class="panel-header">
          <h3>📊 数据概览</h3>
          <p>关键指标汇总</p>
        </div>
        <div class="widgets-grid">
          <div class="widget-item sales-widget">
            <div class="widget-header">
              <div class="widget-icon">💰</div>
              <div class="widget-title">今日销售</div>
            </div>
            <div class="widget-value">¥{{ formatCurrency(todayStats.sales) }}</div>
            <div class="widget-trend positive">
              <el-icon><TrendCharts /></el-icon>
              +{{ todayStats.salesGrowth }}%
            </div>
          </div>
          
          <div class="widget-item orders-widget">
            <div class="widget-header">
              <div class="widget-icon">📦</div>
              <div class="widget-title">新订单</div>
            </div>
            <div class="widget-value">{{ todayStats.orders }}</div>
            <div class="widget-trend positive">
              <el-icon><TrendCharts /></el-icon>
              +{{ todayStats.ordersGrowth }}%
            </div>
          </div>
          
          <div class="widget-item conversion-widget">
            <div class="widget-header">
              <div class="widget-icon">🎯</div>
              <div class="widget-title">转化率</div>
            </div>
            <div class="widget-value">{{ todayStats.conversion }}%</div>
            <div class="widget-trend negative">
              <el-icon><Bottom /></el-icon>
              -{{ todayStats.conversionDrop }}%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { 
  Plus, 
  Document, 
  Setting, 
  Refresh,
  User,
  View,
  Timer,
  TrendCharts,
  Bottom,
  DataAnalysis,
  Sunny,
  ArrowRight,
  UserFilled,
  Files,
  Connection,
  Monitor,
  EditPen,
  Delete,
  Check,
  Warning
} from '@element-plus/icons-vue'
// import { formatDate } from '@/utils'
// 暂时注释掉 WorkspacePanel 组件，因为它依赖 echarts
// import WorkspacePanel from '@/components/WorkspacePanel.vue'
import WorkspacePanel from '@/components/WorkspacePanel.vue'

const stats = ref({
  totalUsers: 125432,
  todayVisits: 23891,
  pageViews: 456789,
  avgTime: '235',
  onlineUsers: 180
})

const pageRanking = ref([
  { id: 1, page: '仪表盘', count: '12,543' },
  { id: 2, page: '用户管理', count: '8,432' },
  { id: 3, page: '数据分析', count: '6,721' },
  { id: 4, page: '系统设置', count: '4,532' },
  { id: 5, page: '日志管理', count: '3,241' }
])

// 新增数据
const quickActions = ref([
  {
    id: 1,
    name: '用户管理',
    description: '添加、编辑用户信息',
    icon: 'UserFilled',
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    id: 2,
    name: '数据导出',
    description: '导出系统数据报告',
    icon: 'Files',
    color: 'linear-gradient(135deg, #10b981 0%, #34d399 100%)'
  },
  {
    id: 3,
    name: '系统配置',
    description: '修改系统参数设置',
    icon: 'Setting',
    color: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)'
  },
  {
    id: 4,
    name: '监控中心',
    description: '查看系统运行状态',
    icon: 'Monitor',
    color: 'linear-gradient(135deg, #ef4444 0%, #f87171 100%)'
  },
  {
    id: 5,
    name: '数据库连接',
    description: '管理数据库连接',
    icon: 'Connection',
    color: 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)'
  },
  {
    id: 6,
    name: '日志查看',
    description: '查看系统操作日志',
    icon: 'Document',
    color: 'linear-gradient(135deg, #06b6d4 0%, #67e8f9 100%)'
  }
])

const systemStats = ref({
  memoryUsage: 68,
  cpuUsage: 45,
  diskUsage: 32
})

const recentActivities = ref([
  {
    id: 1,
    user: '张三',
    action: '创建了新用户',
    target: '李四',
    time: '2分钟前',
    type: 'create',
    typeIcon: 'Plus',
    avatarColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    id: 2,
    user: '王五',
    action: '修改了数据',
    target: '用户配置',
    time: '5分钟前',
    type: 'edit',
    typeIcon: 'EditPen',
    avatarColor: 'linear-gradient(135deg, #10b981 0%, #34d399 100%)'
  },
  {
    id: 3,
    user: '赵六',
    action: '删除了记录',
    target: '过期日志',
    time: '10分钟前',
    type: 'delete',
    typeIcon: 'Delete',
    avatarColor: 'linear-gradient(135deg, #ef4444 0%, #f87171 100%)'
  },
  {
    id: 4,
    user: '系统',
    action: '执行了备份',
    target: '数据库',
    time: '1小时前',
    type: 'system',
    typeIcon: 'Check',
    avatarColor: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)'
  }
])

const announcements = ref([
  {
    id: 1,
    title: '系统维护通知',
    preview: '将于今晚 23:00-01:00 进行系统维护，期间可能影响部分功能使用...',
    date: '2025-07-21',
    category: '系统公告',
    priority: 'high'
  },
  {
    id: 2,
    title: '新功能上线',
    preview: 'V2.1.0 版本已发布，新增数据可视化功能和性能优化...',
    date: '2025-07-20',
    category: '版本更新',
    priority: 'medium'
  },
  {
    id: 3,
    title: '安全策略更新',
    preview: '为提高系统安全性，已更新密码复杂度要求和登录验证机制...',
    date: '2025-07-19',
    category: '安全通知',
    priority: 'high'
  },
  {
    id: 4,
    title: '培训通知',
    preview: '本周五下午将举行系统使用培训，请相关人员准时参加...',
    date: '2025-07-18',
    category: '培训通知',
    priority: 'low'
  }
])

const todayStats = ref({
  sales: 128560,
  salesGrowth: 12.5,
  orders: 234,
  ordersGrowth: 8.2,
  conversion: 3.45,
  conversionDrop: 0.8
})

const currentDate = computed(() => {
  const now = new Date()
  const year = now.getFullYear()
  const month = now.getMonth() + 1
  const day = now.getDate()
  const weekdays = ['日', '一', '二', '三', '四', '五', '六']
  const weekday = weekdays[now.getDay()]
  
  return `${year}年${month}月${day}日星期${weekday}`
})

const formatNumber = (num) => {
  return num.toLocaleString()
}

const getRankingClass = (id) => {
  if (id === 1) return 'rank-gold'
  if (id === 2) return 'rank-silver'  
  if (id === 3) return 'rank-bronze'
  return 'rank-normal'
}

const formatCurrency = (amount) => {
  return (amount / 1000).toFixed(1) + 'k'
}

const handleQuickAction = (action) => {
  console.log('执行快捷操作:', action.name)
  // 这里可以添加路由跳转或其他操作
}

onMounted(() => {
  // 模拟实时数据更新
  setInterval(() => {
    stats.value.onlineUsers = 180 + Math.floor(Math.random() * 20 - 10)
    // 更新系统状态
    systemStats.value.memoryUsage = 60 + Math.floor(Math.random() * 20)
    systemStats.value.cpuUsage = 40 + Math.floor(Math.random() * 30)
    systemStats.value.diskUsage = 30 + Math.floor(Math.random() * 10)
  }, 5000)
})
</script>

<style scoped>
.dashboard {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

/* 欢迎横幅样式 */
.welcome-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

.banner-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.banner-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.circle-1 {
  width: 200px;
  height: 200px;
  top: -50px;
  right: -50px;
  animation-delay: 0s;
}

.circle-2 {
  width: 120px;
  height: 120px;
  bottom: -30px;
  left: 10%;
  animation-delay: 2s;
}

.circle-3 {
  width: 80px;
  height: 80px;
  top: 50%;
  right: 20%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.greeting-animation {
  margin-bottom: 16px;
}

.main-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  color: white;
  animation: slideInLeft 1s ease-out;
}

.title-underline {
  height: 4px;
  width: 100px;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 2px;
  margin-top: 8px;
  animation: expandWidth 1.5s ease-out;
}

@keyframes slideInLeft {
  from { transform: translateX(-50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes expandWidth {
  from { width: 0; }
  to { width: 100px; }
}

.date-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  opacity: 0.95;
  margin: 0 0 12px 0;
  color: white;
}

.weather-icon {
  color: #fbbf24;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0 0 24px 0;
  color: white;
}

.quick-stats {
  display: flex;
  gap: 24px;
}

.quick-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.quick-stat-item:hover {
  transform: translateY(-2px);
}

.quick-stat-number {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}

.quick-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.action-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.banner-decoration {
  position: relative;
}

.floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  animation: floatCards 4s ease-in-out infinite;
}

.card-1 {
  top: -10px;
  right: 0px;
  animation-delay: 0s;
}

.card-2 {
  top: 40px;
  right: -20px;
  animation-delay: 1.5s;
}

.card-3 {
  top: 90px;
  right: 10px;
  animation-delay: 3s;
}

@keyframes floatCards {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.card-icon {
  font-size: 16px;
}

/* 统计卡片样式 */
.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.stat-card:hover::before {
  transform: scaleX(1);
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.users-card .stat-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.visits-card .stat-icon {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.pageviews-card .stat-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.time-card .stat-icon {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.stat-icon-svg {
  font-size: 24px;
  color: white;
  animation: iconBounce 2s infinite;
}

@keyframes iconBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 36px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 6px;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  font-weight: 500;
}

.stat-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.stat-change.positive {
  color: #10b981;
}

.stat-change.negative {
  color: #ef4444;
}

.change-icon {
  font-size: 14px;
}

.stat-chart {
  width: 80px;
  height: 60px;
}

.mini-chart {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.mini-chart.blue {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.mini-chart.green {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.mini-chart.orange {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.mini-chart.red {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.chart-wave {
  position: absolute;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
  animation: wave 2s infinite;
}

.wave-1 {
  top: 30%;
  animation-delay: 0s;
}

.wave-2 {
  top: 60%;
  animation-delay: 0.5s;
}

@keyframes wave {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* 图表区域样式 */
.charts-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.chart-card {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.chart-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}

.chart-title-section h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.chart-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 24px;
}

.chart-legend {
  display: flex;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  position: relative;
}

.legend-color.pulse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  animation: legendPulse 2s infinite;
}

.legend-color.blue {
  background: #3b82f6;
}

.legend-color.blue.pulse::before {
  background: #3b82f6;
}

.legend-color.orange {
  background: #f59e0b;
}

.legend-color.orange.pulse::before {
  background: #f59e0b;
}

.legend-color.green {
  background: #10b981;
}

.legend-color.green.pulse::before {
  background: #10b981;
}

@keyframes legendPulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.chart-actions {
  display: flex;
  gap: 8px;
}

.chart-content {
  height: 340px;
}

.enhanced-chart {
  height: 100%;
  position: relative;
  background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 20px;
  overflow: hidden;
}

.chart-grid {
  position: absolute;
  top: 20px;
  left: 60px;
  right: 20px;
  bottom: 40px;
}

.grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.05);
}

.grid-line:nth-child(1) { top: 0%; }
.grid-line:nth-child(2) { top: 25%; }
.grid-line:nth-child(3) { top: 50%; }
.grid-line:nth-child(4) { top: 75%; }
.grid-line:nth-child(5) { top: 100%; }

.chart-data-lines {
  position: absolute;
  top: 20px;
  left: 60px;
  right: 20px;
  bottom: 40px;
}

.data-line {
  position: absolute;
  width: 100%;
  height: 100%;
}

.animated-line {
  animation: drawLine 2s ease-out;
}

@keyframes drawLine {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.blue-line {
  background: linear-gradient(to right, #3b82f6, #60a5fa);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 80 Q25 60 50 70 T100 50' stroke='white' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat;
  mask-size: 100% 100%;
}

.line-points {
  position: relative;
  width: 100%;
  height: 100%;
}

.data-point {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  border: 2px solid #3b82f6;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: pointAppear 0.5s ease-out both;
}

@keyframes pointAppear {
  from { transform: translate(-50%, -50%) scale(0); }
  to { transform: translate(-50%, -50%) scale(1); }
}

.chart-x-axis {
  position: absolute;
  bottom: 10px;
  left: 60px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.chart-y-axis {
  position: absolute;
  left: 10px;
  top: 20px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

/* 侧边图表样式 */
.enhanced-side-chart {
  position: relative;
}

.status-indicators {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-indicator {
  background: #10b981;
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
}

.pulsing {
  animation: dotPulse 1.5s infinite;
}

@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.realtime-stats {
  text-align: center;
  margin: 32px 0;
}

.realtime-circle {
  position: relative;
  margin: 0 auto 24px;
  width: 140px;
  height: 140px;
}

.circle-progress {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(#10b981 calc(var(--progress) * 1%), #e5e7eb 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.circle-progress::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: white;
}

.realtime-number {
  font-size: 32px;
  font-weight: 800;
  color: #10b981;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.realtime-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.performance-metrics {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 24px;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 12px;
}

.metric-icon {
  font-size: 16px;
}

.metric-value {
  font-weight: 600;
  color: #1a1a1a;
}

.metric-name {
  color: #666;
}

.ranking-section h4 {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 20px 0;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.enhanced-ranking {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.enhanced-ranking:hover {
  background: #e2e8f0;
  transform: translateX(4px);
}

.ranking-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
}

.rank-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

.rank-silver {
  background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
  box-shadow: 0 4px 12px rgba(209, 213, 219, 0.4);
}

.rank-bronze {
  background: linear-gradient(135deg, #cd7c2f 0%, #a0522d 100%);
  box-shadow: 0 4px 12px rgba(205, 124, 47, 0.4);
}

.rank-normal {
  background: #6b7280;
  color: white;
}

.ranking-info {
  flex: 1;
}

.page-name {
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 600;
  margin-bottom: 6px;
}

.page-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-count {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  border-radius: 2px;
  transition: width 1s ease-out;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .charts-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 16px;
  }
  
  .welcome-banner {
    padding: 24px;
  }
  
  .banner-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .quick-stats {
    justify-content: center;
  }
  
  .action-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .stats-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .chart-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .floating-card {
    position: relative;
    margin-bottom: 8px;
  }
}

/* 新增内容区域样式 */
.additional-content {
  margin: 32px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.panel-header {
  margin-bottom: 20px;
  
  h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px 0;
  }
  
  p {
    font-size: 14px;
    color: #666;
    margin: 0;
  }
}

/* 快捷操作面板 */
.quick-actions-panel {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.quick-actions-panel:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.action-item:hover {
  background: #e2e8f0;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: rgba(102, 126, 234, 0.2);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.action-info {
  flex: 1;
}

.action-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.action-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.action-arrow {
  color: #cbd5e1;
  transition: all 0.3s ease;
}

.action-item:hover .action-arrow {
  color: #667eea;
  transform: translateX(4px);
}

/* 系统状态监控 */
.system-status-panel {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.system-status-panel:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.status-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.status-item:hover {
  background: #e2e8f0;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-indicator.healthy {
  background: #10b981;
}

.status-indicator.warning {
  background: #f59e0b;
}

.status-indicator.error {
  background: #ef4444;
}

.pulse-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 currentColor;
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.status-info {
  flex: 1;
}

.status-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.status-value {
  font-size: 12px;
  color: #666;
}

.status-chart {
  width: 80px;
}

.mini-progress {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.mini-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress);
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 3px;
  transition: width 1s ease-out;
}

.mini-progress.warning::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.mini-progress.error::before {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

/* 底部内容区域 */
.bottom-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}

/* 最近活动 */
.recent-activities {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.recent-activities:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.activity-item:hover {
  background: #f8fafc;
}

.activity-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 14px;
  margin-bottom: 4px;
}

.user-name {
  font-weight: 600;
  color: #1a1a1a;
}

.activity-action {
  color: #666;
  margin: 0 4px;
}

.activity-target {
  color: #667eea;
  font-weight: 500;
}

.activity-time {
  font-size: 12px;
  color: #9ca3af;
}

.activity-type {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.activity-type.create {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.activity-type.edit {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.activity-type.delete {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.activity-type.system {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.activities-footer {
  text-align: center;
  border-top: 1px solid #f0f2f5;
  padding-top: 16px;
}

/* 通知公告 */
.announcements {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.announcements:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.announcement-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid #f0f2f5;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.announcement-item:hover {
  border-color: #667eea;
  background: #f8fafc;
}

.announcement-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  position: relative;
  flex-shrink: 0;
}

.announcement-indicator.high {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

.announcement-indicator.medium {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
}

.announcement-indicator.low {
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.announcement-content {
  flex: 1;
}

.announcement-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
  line-height: 1.4;
}

.announcement-preview {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.announcement-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #9ca3af;
}

.announcement-date {
  font-weight: 500;
}

.announcement-category {
  background: #e5e7eb;
  padding: 2px 6px;
  border-radius: 4px;
}

.announcement-actions {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

/* 数据概览小组件 */
.data-widgets {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.data-widgets:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.widgets-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.widget-item {
  padding: 20px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.widget-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  border-radius: 12px;
}

.sales-widget {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: white;
}

.orders-widget {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.conversion-widget {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: white;
}

.widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.widget-icon {
  font-size: 20px;
}

.widget-title {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

.widget-value {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.widget-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.widget-trend.positive {
  color: rgba(255, 255, 255, 0.9);
}

.widget-trend.negative {
  color: rgba(255, 255, 255, 0.7);
}

/* 响应式设计更新 */
@media (max-width: 1200px) {
  .additional-content {
    grid-template-columns: 1fr;
  }
  
  .bottom-content {
    grid-template-columns: 1fr 1fr;
  }
  
  .quick-actions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .additional-content {
    margin: 24px 0;
  }
  
  .bottom-content {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
  
  .quick-actions-panel,
  .system-status-panel,
  .recent-activities,
  .announcements,
  .data-widgets {
    padding: 20px;
  }
}
/* 工作台面板样式 */
.workspace-section {
  margin: 32px 0;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.8));
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 传统视图部分 */
.legacy-section {
  margin: 32px 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.legacy-section:hover {
  opacity: 1;
}

.section-title {
  margin-bottom: 20px;
  text-align: center;
}

.section-title h3 {
  font-size: 20px;
  color: #606266;
  margin-bottom: 8px;
}

.section-title p {
  color: #909399;
  font-size: 14px;
  margin: 0;
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .workspace-section {
    margin: 24px 0;
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .workspace-section {
    margin: 16px 0;
    padding: 16px;
    border-radius: 12px;
  }
  
  .section-title h3 {
    font-size: 18px;
  }
}

</style>
